<template>
  <el-main>
    <div class="login_title">修改密码</div>
    <div class="login_content">
      <el-form
        ref="updatePasswordForm"
        :inline="true"
        label-width="auto"
        :model="updatePasswordModel"
        :rules="updatePasswordRules"
        size="small"
        label-suffix=":"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="登录账号">
              <el-input v-model="updatePasswordModel.username" placeholder="登录账号" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="用户名称">
              <el-input v-model="updatePasswordModel.name" placeholder="用户名称" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="旧密码" prop="oldPassword">
              <el-input v-model="updatePasswordModel.oldPassword" placeholder="旧密码" show-password></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="新密码" prop="newPassword">
              <el-input v-model="updatePasswordModel.newPassword" placeholder="新密码" show-password></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input v-model="updatePasswordModel.confirmPassword" placeholder="确认密码" show-password></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button
        type="primary"
        size="small"
        @click="handleConfirm"
        style="margin-top: 16px"
      >确定
      </el-button
      >
    </div>
  </el-main>
</template>
<script>
  import {getInfo, updatePassword} from "@/api/login/info";
  import {ApiError} from "../../utils/errors";

  export default {
    data() {
      const validateUsername = (rule, value, callback) => {
        if (!value) {
          callback(new Error("确认密码必须填写"));
        }
        if (this.updatePasswordModel.newPassword === this.updatePasswordModel.confirmPassword) {
          callback();
        } else {
          callback(new Error("两次密码输入不一致"));
        }
      };
      return {
        updatePasswordModel: {
          username: null,
          name: null,
          oldPassword: null,
          newPassword: null,
          confirmPassword: null
        },
        updatePasswordRules: {
          oldPassword: [{required: true, message: "旧密码必须填写", trigger: "blur"}],
          newPassword: [{required: true, message: "新密码必须填写", trigger: "blur"}],
          confirmPassword: [{required: true, trigger: "blur", validator: validateUsername}]
        }
      }
    },
    created() {
      this.getUserInfo();
    },
    methods: {
      getUserInfo() {
        getInfo().then(res => {
          if (res.status == 200) {
            if (!res.data.success) {
              return this.$message.error(ApiError.msg(res.data.message));
            }
            const user = res.data.data;
            this.updatePasswordModel.username = user.username;
            this.updatePasswordModel.name = user.name;
          }
        });
      },
      handleConfirm() {
        this.$refs.updatePasswordForm.validate(valid => {
          if (!valid) {
            return;
          }
          const params = {
            oldPassword: this.updatePasswordModel.oldPassword,
            newPassword: this.updatePasswordModel.newPassword
          };
          updatePassword(params).then(res => {
            if (res.status == 200) {
              if (!res.data.success) {
                return this.$message.error(ApiError.msg(res.data.message));
              } else {
                this.$message.success("修改密码成功");
                this.updatePasswordModel.oldPassword = null;
                this.updatePasswordModel.newPassword = null;
                this.updatePasswordModel.confirmPassword = null;
              }
            }
          });
        });
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "@/styles/full-form";

  .login_title {
    padding-top: 60px;
    padding-bottom: 20px;
    padding-left: 400px;
    padding-right: 600px;
    font-size: 16px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.85);
  }

  .login_content {
    padding-top: 20px;
    padding-left: 400px;
    padding-right: 600px;
  }

</style>
